<template>
    <a-card :bordered="false" style="margin-top: 20px;" title="仓库查找">
        <div class="d-flex">
            <div class="searchItem d-flex align-item-center">
                <label class="width-70">名称:</label>
                <a-input v-model:value="queryParam.name"></a-input>
            </div>
            <div class="searchItem d-flex align-item-center">
                <label class="width-70">编码:</label>
                <a-input v-model:value="queryParam.code"></a-input>
            </div>
            <div class="searchItem d-flex align-item-center">
                <label class="width-70">地址:</label>
                <a-input v-model:value="queryParam.address"></a-input>
            </div>
            <div class="">
                <a-button type="primary" @click="search">查询</a-button>
                <a-button class="ml-20">重置</a-button>
            </div>
        </div>
    </a-card>
    <a-card :bordered="false" style="margin-top: 20px;">
        <div class="actionBox">
            <a-button type="primary">
                <template #icon><plus-outlined /></template>
                添加仓库记录
            </a-button>
            <a-button type="primary" :danger="true" style="margin-left: 20px;" disabled>
                <template #icon><delete-outlined /></template>
                批量删除
            </a-button>
        </div>
        <a-table
          ref="tabs"
          :dataSource="dataSource"
          :columns="columns"
          :rowKey="(record) => record.id"
        >
          <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'address'">
                  <span>
                    <a-tag color="green">
                        {{ record.address }}
                    </a-tag>
                  </span>
              </template>
              <template v-if="column.key === 'actions'">
                  <span>
                      <a @click="$refs.allocation.showAllocation()">货位管理</a>
                      <a-divider type="vertical" />
                      <a>编辑</a>
                      <a-divider type="vertical" />
                      <a>删除</a>
                  </span>
              </template>
          </template>
        </a-table>
    </a-card>
    <Allocation ref="allocation" />
</template>

<script>
import { WarehousePage } from '@/api/warehouse/index.js'
import { defineComponent } from '@vue/composition-api'
import { onMounted, reactive } from '@vue/runtime-core'
import Allocation from './components/Allocation'
const columns = [{
    title: 'ID',
    dataIndex: 'id',
    key: 'id'
}, {
    title: '名称',
    dataIndex: 'name',
    key: 'name'
}, {
    title: '编码',
    dataIndex: 'code',
    key: 'code'
}, {
    title: '地址',
    dataIndex: 'address',
    key: 'address'
}, {
    title: '容量',
    dataIndex: 'size',
    key: 'size'
}, {
    title: '添加日期',
    dataIndex: 'createDate',
    key: 'createDate'
}, {
    title: '更新日期',
    dataIndex: 'upDate',
    key: 'upDate'
}, {
    title: '操作',
    dataIndex: 'actions',
    key: 'actions'
}]
export default defineComponent({
    components: {
        Allocation
    },
    setup() {
        onMounted(() => {
            getWarehouseList()
        })
        let queryParam = reactive({})
        let dataSource = reactive([])
        const getWarehouseList = () => {
            WarehousePage().then(res => {
                res.data.result.forEach(el => {
                    // el.address = [address]
                    dataSource.push(el)
                })
            })
        }
        const search = () => {
            console.log(queryParam)
        }
        return {
            dataSource,
            columns,
            queryParam,
            search
        }
    },
})
</script>


<style lang="scss" scoped>
.actionBox {
    margin-bottom: 20px;
}
.searchItem {
    margin-right: 20px;
}
</style>